<template>
  <div>
    <!-- <div class="pop_div"></div> -->
    <div class="deviceRelate">
      <IconTitle class="selfTitle" title="点检策略适用设备" imgUrl="yunwei" />
      <div class="firstTitle">策略</div>
      <div class="devCard">
        <el-row>
          <el-col :span="6">
            <!-- <i
                  class="icon-shebeizhuangtai"
                  style=" padding-left: 15px"
                ></i> -->
            <div class="title" style="font-size: 14px">
              {{ newDev.deviceName }}
            </div>
            <div>{{ newDev.deviceNum }}</div>
          </el-col>
          <el-col :span="2">
            <div class="title">
              <span class="dotted"></span
              >{{
                newDev.status == "0"
                  ? "正常"
                  : newDev.status == "1"
                  ? "故障"
                  : "带病运行"
              }}
            </div>
          </el-col>
          <el-col :span="2">
            <div class="title">
              <span class="dotted"></span>{{ newDev.newUseStatus }}
            </div>
          </el-col>

          <el-col :span="3">
            <div class="title">{{ newDev.createBy }}</div>
            <div class="secondTitle">创建人</div>
          </el-col>
          <el-col :span="4">
            <div class="title">{{ newDev.assetNum }}</div>
            <div class="secondTitle">资产编号</div>
          </el-col>
          <el-col :span="4">
            <div class="title">{{ newDev.specification }}</div>
            <div class="secondTitle">型号</div>
          </el-col>
        </el-row>
      </div>
      <div class="firstTitle">操作</div>
      <div class="action">
        <el-row :gutter="10">
          <el-col :span="6">
            <div class="actionLeft">
              <div class="kinds">
                <span
                  v-for="(item, index) in chooseList"
                  :key="index"
                  :class="{ active: ischoosed == index }"
                  >{{ item.name }}</span
                >
              </div>
              <div class="treeList">
                <el-tree
                  :data="dataDev"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                ></el-tree>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="boxCard">
              <el-input
                placeholder="请输入内容"
                v-model="deviceName"
                @change="searchTree"
              >
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>
              <div class="tableStyle">
                <div
                  v-for="(item, index) in tableList"
                  :key="index"
                  :class="{ isdevChoosed: isdevChoosed == index }"
                  @click="choose(item, index)"
                >
                  <span class="colsx">{{ item.deviceName }}</span>
                  <span class="cols">{{ item.deviceNum }}</span>
                  <span class="colsm">{{ devStatus(item.useStatus) }}</span>
                  <span class="colsx">{{ item.deptName }}</span>
                </div>
              </div>
              <!-- <div style="text-align:center">
                <el-pagination
  background
  :pager-count="5"
  layout="prev, pager, next"
 small
 :page-size="5"
 @current-change="handleCurrentChange"
 :current-page.sync="currentPage"
  :total="total">
</el-pagination>
            </div> -->
            </div>
            <!-- <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="100"
              background
               layout="total, prev, pager, next"
              :total="1000">
            </el-pagination> -->
        </el-col>
        <el-col :span="2" class="button">
            <div > <el-button type="primary" icon="el-icon-plus" @click="addDev">添加</el-button></div>
             <div> <el-button type="danger" icon="el-icon-circle-close" @click="delDev">删除</el-button></div>
        </el-col>
        <el-col :span="8">
          <div class="boxCard">
            <!-- <el-input placeholder="请输入内容" >
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input> -->
            <div class="tableStyle">
                <div v-for="item,index in newTableList" :key="index" :class="{'isdevChoosed':isnewdevChoosed==index}" @click="chooseNew(item,index)">
                    <span class="colsx">{{item.deviceName}}</span>
                    <span class="cols">{{item.deviceNum}}</span>
                    <span class="colsm">{{devStatus(item.useStatus)}}</span>
                    <span class="colsx">{{item.deptName}}</span>
                </div>
              </div>

            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="text-align: center; margin-top: 20px">
      <el-button type="text" style="color: #262626" @click="cancel"
        >取消</el-button
      >
      <el-button type="primary" icon="el-icon-check" @click="comfireBtn"
        >确认</el-button
      >
    </div>
  </div>
</template>
<script>
import IconTitle from "@/components/icon-title/index.vue";
import { treeList, treeTable } from "@/api/ems/inspection/dev";
export default {
  name: "DeviceRelate",

  props: ["listObj"],
  components: {
    IconTitle,
  },
  data() {
    return {
      ischoosed: 0,
      currentPage: 0,
      isdevChoosed: -1,
      isnewdevChoosed: -1,
      chooseList: [
        {
          name: "类别",
        },
        {
          name: "位置",
        },
      ],
      pageCount: 4,
      defaultProps: {
        children: "children",
        label: "name",
      },
      dataDev: [],
      tableList: [],
      newDev: {},
      oldDev: {},
      newTableList: [],
      categoryId: "",
      deviceName: "",
      total: 0,
      //evObject:{}
    };
  },

  mounted() {
    treeList().then((res) => {
      this.dataDev = res.data.data;
    });
    this.getTreeList();
    this.$nextTick(() => {
      this.newTableList = this.listObj;
      console.log(this.newTableList)
    });
  },
  methods: {
    searchTree() {
      this.currentPage = 1;
      this.getTreeList();
    },
    getTreeList() {
      treeTable({
        categoryId: this.categoryId,
        deviceName: this.deviceName,
      }).then((res) => {
        let arr = res.data.data;
        let ids = this.listObj.map((item) => item.deviceId);
        let idsn = arr.map((item) => item.deviceId);
        this.tableList = arr.filter((item) => !ids.includes(item.deviceId));
      });
    },
    handleNodeClick(data) {
      this.categoryId = data.id;
      this.getTreeList();
    },
    cancel() {
      this.$emit("cancel");
    },
    handleCurrentChange(index) {
      this.currentPage = index;
      this.getTreeList();
    },
    choose(item, index) {
      this.isdevChoosed = index;
      this.newDev = item;
      let newUseStatus = this.devStatus(item.useStatus);
      this.$set(this.newDev, "newUseStatus", newUseStatus);
    },
    devStatus(m) {
      switch (m) {
        case "0":
          return "在用";
        case "1":
          return "闲用";
        case "2":
          return "出租";
        case "3":
          return "禁用";
        case "4":
          return "报废";
        default:
          break;
      }
    },
    chooseNew(item, index) {
      this.isnewdevChoosed = index;
      this.oldDev = item;
    },
    addDev() {
      if (this.isdevChoosed != -1) {
        this.tableList.splice(this.isdevChoosed, 1);
        this.newTableList.push(this.newDev);
        this.isdevChoosed = -1;
        this.newDev = {};
      } else {
        this.$message.error("请选择你要添加的设备");
      }

    
    },
    delDev() {
      if (this.isnewdevChoosed != -1) {
        this.newTableList.splice(this.isnewdevChoosed, 1);
        this.tableList.push(this.oldDev);
        this.isnewdevChoosed = -1;
        this.oldDev = {};
      } else {
        this.$message.error("请选择你要删除的设备");
      }
    },
    comfireBtn() {
      let arrList = [];
      this.newTableList.map((item) => {
        arrList.push(item.deviceId);
      });
      this.$emit("comfire", { deviceIdList: arrList });
    },
  },
};
</script>
<style lang="scss" scoped>
.firstTitle {
  color: #101010;
  font-size: 12px;
  margin: 20px 0;
}
.deviceRelate {
  // position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%,-50%);
  // background-color: white;
  ::v-deep .devCard {
    background-color: #fafbfd;
    padding: 10px;
    line-height: 25px;
    margin: 10px 0;
    .el-row {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .el-col {
      margin-bottom: 0;
    }
  }
  .title {
    color: #101010;
    font-weight: bold;
    font-size: 12px;
  }
  .secondTitle {
    color: #868181;
    font-size: 12px;
  }
  .dotted {
    width: 12px;
    height: 12px;
    display: inline-block;
    background-color: rgba(37, 198, 137, 100);
    border-radius: 50%;
    margin-right: 5px;
    box-shadow: 0 2px 6px 0 #25c689;
  }
  .kinds {
    border-bottom: 1px solid #ecf0f4;
    margin-right: 10px;
    font-size: 12px;
    span {
      display: inline-block;
      width: 50%;
      text-align: center;
      font-size: 12px;
      color: #868181;
      padding: 10px 15px;
      //   margin: 0 20px;
    }
    .active {
      border-bottom: 2px solid #26ae61;
      color: #26ae61;
    }
  }
  ::v-deep.treeList {
    padding: 10px 15px;
    max-height: 300px;
    overflow-y: auto;
    .el-tree-node__label {
      font-size: 12px;
      color: #606266;
    }
  }
  .actionLeft {
    border-right: 1px solid #ecf0f4;
    // height: 40vh;
  }
  .boxCard {
    padding: 10px;
    border: 1px solid rgba(236, 240, 244, 100);
  }
  .tableStyle {
    //font-size: 12px;
    margin: 20px 0px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 12px;
    div {
      //   display: flex;

      padding: 10px;
      cursor: pointer;
      span {
        display: inline-block;
        overflow: hidden;
        //word-break: break-all;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 5px;
      }
      .cols {
        width: 35%;
      }
      .colsm {
        width: 15%;
      }
      .colsx {
        width: 25%;
      }
    }
  }
  .el-button--primary {
    background-color: #26ae61;
    border-color: #26ae61;
    margin-bottom: 20px;
    margin-top: 30px;
    font-size: 12px;
  }
  .el-button--danger {
    background-color: #e74c3d;
    border-color: #e74c3d;
    font-size: 12px;
  }
  .button {
    div {
      text-align: center;
    }
  }
}
.isdevChoosed {
  background-color: rgba(39, 182, 106, 0.41);
}
</style>